<template>
  <div class="footprint">
    <div class="foot-top">
      <p class="my-foot">我的足迹</p>
      <p class="all" @click="allFn()">查看全部></p>
    </div>
    <div class="foot-box">
      <div class="foot-item" v-for="(item, id) in FootList" :key="id">
        <img :src="item.img" alt="" />
        <p class="names">{{ item.name }}</p>
        <p class="spans">{{ item.text }}</p>
        <p class="price">{{ item.price }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyFootprint",
  data(){
    return{
      FootList:[
        {
          img:"https://yanxuan-item.nosdn.127.net/fcdcb840a0f5dd754bb8fd2157579012.jpg",
          name:"自煮火锅不排队 麦饭石不粘鸳鸯火锅",
          text:"清汤鲜香 红汤劲爽",
          price:"¥159.00"
        },
        {
          img:"https://yanxuan-item.nosdn.127.net/fcdcb840a0f5dd754bb8fd2157579012.jpg",
          name:"自煮火锅不排队 麦饭石不粘鸳鸯火锅",
          text:"清汤鲜香 红汤劲爽",
          price:"¥159.00"
        },
        {
          img:"https://yanxuan-item.nosdn.127.net/fcdcb840a0f5dd754bb8fd2157579012.jpg",
          name:"自煮火锅不排队 麦饭石不粘鸳鸯火锅",
          text:"清汤鲜香 红汤劲爽",
          price:"¥159.00"
        },
        {
          img:"https://yanxuan-item.nosdn.127.net/fcdcb840a0f5dd754bb8fd2157579012.jpg",
          name:"自煮火锅不排队 麦饭石不粘鸳鸯火锅",
          text:"清汤鲜香 红汤劲爽",
          price:"¥159.00"
        }
      ]
    }
  },
   methods:{
    allFn(){
      this.$router.push('/')
    }
  }
};
</script>

<style lang="scss" scoped>
.footprint {
  width: 100%;
  height: 400px;
  background: white;
  margin-top: 30px;
  .foot-top {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #e4e4e4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .my-foot {
      font-size: 22px;
      margin-left: 15px;
    }
    .all {
      font-size: 16px;
      color: #999999;
      margin-right: 15px;
    }
  }
  .foot-box {
    display: flex;
    justify-content: space-around;
    .foot-item {
      width: 200px;
      height: 280px;
      margin-top: 40px;
      text-align: center;
      transition: all 0.6s;
      img {
        width: 160px;
        height: 160px;
        margin-top: 10px;
      }
      .names {
        font-size: 14px;
        width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 10px;
        margin-left: 20px;
      }
      .spans {
        color: #999;
        height: 29px;
        font-size: 14px;
        margin-top: 10px;
      }
      .price {
        color: #cf4444;
        font-size: 20px;
      }
    }
    .foot-item:hover{
       transform:scale(1.1);
       box-shadow: 0px 0px 5px rgba(0,0,0,.5);
    }
  }
}
</style>